<template>
  <div>
    <el-dialog
      :title="'私信: 用户名: ' + username"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="400px"
      @closed="closed"
    >
      <el-input v-model="state.content" type="textarea" :rows="4" placeholder="请输入消息内容" />
      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button
          :disabled="state.updating"
          :loading="state.updating"
          type="primary"
          @click="confirm"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reqUserChatSendMsg } from "@/api/user";
import { message } from "@/utils/message";
import { debounce } from "lodash-es";

const props = withDefaults(
  defineProps<{
    username?: string;
    uid?: number;
  }>(),
  {}
);
const state = reactive({
  updating: false,
  isShow: false,
  content: ""
});
const closed = () => {
  state.isShow = false;
  state.content = "";
};
const open = () => {
  state.isShow = true;
};
const confirm = debounce(async () => {
  if (!state.content) {
    message.error("请输入消息内容");
    return;
  }
  try {
    state.updating = true;
    await reqUserChatSendMsg({
      UserId: props.uid,
      Msg: state.content
    });
    state.updating = false;
    state.content = "";
    message.success("发送成功");
    closed();
  } catch (error) {
    state.updating = false;
    console.log(error);
  }
}, 500);

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 10px;
}
.el-textarea {
  --el-input-bg-color: #f9f9f9;
}
</style>
